<template>
	<tm-fullView>
		<tm-menubars title="徽章/角标" color="bg-gradient-primary-lighten" :showback="true"></tm-menubars>
		<tm-sheet color="black ">
			<view class="text-size-s text-weight-b mb-24">
				
				<view class="d-inline-block">
					<tm-badges :offset="[10,0]"></tm-badges>
					基本示例
				</view>
			</view>
			<tm-row>
				<tm-col :grid="3">
					<tm-badges></tm-badges>
					<text>右上角</text>
				</tm-col>
				<tm-col :grid="3">
					<tm-badges :dot="false" :label="100"></tm-badges>
					<text>数字</text>
				</tm-col>
				<tm-col :grid="4">
					<tm-badges :offset="[0,-5]" color="bg-gradient-red-accent" icon-color="yellow" :dot="false" icon="icon-QQ"></tm-badges>
					<text>图标角标</text>
				</tm-col>
				
			</tm-row>
		</tm-sheet>
	</tm-fullView>

</template>

<script>
	import tmFullView from "@/tm-vuetify/components/tm-fullView/tm-fullView.vue"
	import tmMenubars from "@/tm-vuetify/components/tm-menubars/tm-menubars.vue"
	import tmSheet from "@/tm-vuetify/components/tm-sheet/tm-sheet.vue"
	import tmRow from "@/tm-vuetify/components/tm-row/tm-row.vue"
	import tmBadges from "@/tm-vuetify/components/tm-badges/tm-badges.vue"
	import tmCol from "@/tm-vuetify/components/tm-col/tm-col.vue"
	export default {
		components:{tmFullView,tmMenubars,tmSheet,tmRow,tmBadges,tmCol},
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>

</style>
